<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="listhead">
                <span id="listroot" class="mynav" name="listroot">根目录</span>&nbsp;&nbsp;|&nbsp;&nbsp;
                <span id="listback" class="mynav" resid="" name="listback">返回上一级</span>&nbsp;&nbsp;
                <!-- <span id="listcurr" resid="" name="listcurr">ssssss</span> -->
                <div class="layui-inline" style="margin-left: 1%;">
                    <button type="button" class="layui-btn" id="listcurr">移动到&nbsp;&nbsp;
                    </button>
                </div>
            </div>
            <div id="datatable1">
            </div>
            <script id="datatable1tpl" type="text/html">
                <ul id="dataul">
                    {{each Data as item index}}
                    <li id="datali">
                        <div class="lileft">
                            {{if item.IsFolder}}
                            <img src="../../../start/layui/images/folder.png">
                            &nbsp;
                            <span id="listfilename" resid="{{item.ID}}" folder="true">{{item.Name}}</span>
                            {{else}}
                            {{if item.ResourceType == 0}}
                            <img src="../../../start/layui/images/mp4.png">
                            {{else if item.ResourceType == 1}}
                            <img src="../../../start/layui/images/pdf.png">
                            {{else if item.ResourceType == 2}}
                            <img src="../../../start/layui/images/rich.png">
                            {{else if item.ResourceType == 3}}
                            <img src="../../../start/layui/images/rar.png">
                            {{/if}}
                            &nbsp;
                            <span id="listfilename" resid="{{item.ID}}">{{item.Name}}</span>
                            {{/if}}
                        </div>
                    </li>
                    {{/each}}
                </ul>
            </script>
        </div>
    </div>
</div>
<script>
    $(document).ready(function (e) {

        let List_ID = ""; //当前资源ID
        let List_Name = ""; //当前资源Name 
        let List_NavIDs = [];
        let List_NavNames = [];
        let List_FileItems = JSON.parse(localStorage.getItem(
            "ListFileItems")); //0：MP4视频，1：pdf文档，2：富文本 3：Rar，Zip压缩文件
        let List_Restype = localStorage.getItem("ListResType"); //0：MP4视频，1：pdf文档，2：富文本 3：Rar，Zip压缩文件
        localStorage.setItem("ListFileItems", null);
        localStorage.setItem("ListResType", null);

        let Token = "";

        function login() {
            var fromData = new FormData();
            fromData.append("userid", "admin");
            fromData.append("password", "000000");
            fromData.append("cookie", false);
            fromData.append("rememberLogin", false);
            $.ajax({
                type: "POST",
                url: layui.setter.url1 + '/api/_login/Login',
                async: false,
                contentType: false,
                processData: false,
                dataType: "json",
                mimeType: "multipart/form-data",
                data: fromData,
                success: function (res) {
                    if (res) {
                        Token = res.token_type + " " + res.access_token;
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: "调用接口异常"
                    });
                }
            });
        }

        login();

        //初始化列表
        listloadtable();

        function listupdate() {
            //根目录
            // $(document).on('click', '#listroot', function (e) {
            $("#listroot").click(function (e) {
                List_ID = "";
                List_Name = "";
                List_NavIDs = [];
                List_NavNames = [];
                $("#listcurr").html("移动到&nbsp;&nbsp;");
                listloadtable();
            });

            //上一级
            // $(document).on('click', '#listback', function (e) {
            $("#listback").click(function (e) {
                List_NavIDs.pop();
                List_NavNames.pop();
                if (List_NavIDs.length > 0) {
                    List_ID = List_NavIDs[List_NavIDs.length - 1];
                    List_Name = List_NavNames[List_NavNames.length - 1];
                    $("#listcurr").html("移动到&nbsp;&nbsp;" + List_Name);
                } else {
                    List_ID = "";
                    List_Name = "";
                    $("#listcurr").html("移动到&nbsp;&nbsp;");
                }
                console.log(List_Name);
                localStorage.setItem("ListCurrID", List_ID);
                localStorage.setItem("ListCurrName", List_Name);
                listloadtable();
            });

            //点击目录的方法
            $("#datatable1").on('click', '#listfilename', function (e) {
            // $("#listfilename").click(function (e) {
                if ($(this).attr("folder")) {
                    List_ID = $(this).attr("resid");
                    List_Name = $(this).text();
                    List_NavIDs.push(List_ID);
                    List_NavNames.push(List_Name);
                    console.log(List_Name);
                    $("#listcurr").html("移动到&nbsp;&nbsp;" + List_Name);
                    localStorage.setItem("ListCurrID", List_ID);
                    localStorage.setItem("ListCurrName", List_Name);
                    listloadtable();
                }
            });
        }

        //移动
        $("#listcurr").click(function (e) {
            let result = true;
            for (let i of List_FileItems) {
                $.ajax({
                    url: layui.setter.url1 + '/api/Resource/Move',
                    type: 'post',
                    async: false,
                    headers: {
                        "Authorization": Token
                    },
                    contentType: 'application/json',
                    data: JSON.stringify({
                        "Id": i,
                        "ToId": List_ID
                    }),
                    success: function (res) {
                        let data = jQuery.parseJSON(res);
                        if (data.Code == 200) {
                            layer.closeAll();
                            parent.location.reload();
                        } else {
                            layer.open({
                                tittle: "错误",
                                type: 0,
                                content: data.Msg
                            });
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        result = false;
                        layer.open({
                            tittle: "错误",
                            type: 0,
                            content: "调用接口异常"
                        });
                    }
                });
            }
            if (result) {
                listloadtable();
            } else {
                layer.open({
                    content: "移动过程中出现错误",
                    skin: 'msg my-btn',
                    time: 2000
                });
            }
        });

        //查询条件
        function getSearchParam1() {
            return {
                "Id": List_ID,
                "Type": List_Restype,
                "Key": "",
                "Page": 0,
                "Limit": 10,
                "Count": 0,
                "PageCount": 0,
                "IsFolderOnly": true
            };
        }

        //加载表格
        function listloadtable() {
            $.ajax({
                type: "POST",
                url: layui.setter.url1 + '/api/Resource/List',
                contentType: 'application/json',
                headers: {
                    "Authorization": Token
                },
                // xhrFields: {
                //     withCredentials:true  //支持附带详细信息
                // },
                // crossDomain:true,//请求偏向外域
                data: JSON.stringify(getSearchParam1()),
                success: function (res) {
                    let data = jQuery.parseJSON(res);
                    console.log("List:", data);
                    if (data.Code == 200) {
                        $("#datatable1").empty();
                        $("#datatable1").append(template('datatable1tpl', data));
                        listupdate();
                    } else {
                        layer.open({
                            tittle: "错误",
                            type: 0,
                            content: data.Msg
                        });
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.open({
                        tittle: "错误",
                        type: 0,
                        content: "调用接口异常"
                    });
                }
            });
        }
    });
</script>